<!doctype html>
<html>
    <head>
        <!-- meta -->
        <!-- meta -->
        <title>Events</title>
        <!-- css -->
        <link href="../styles/examples.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.common.css" rel="stylesheet"/>
        <link href="../../source/styles/kendo.kendo.css" rel="stylesheet"/>
        <!-- css -->
        <!-- script -->
        <script src="../js/jquery.js"></script>
        <script src="../../source/js/kendo.core.js"></script>
        <script src="../../source/js/kendo.fx.js"></script>
        <script src="../../source/js/kendo.draganddrop.js"></script>
        <script src="../../source/js/kendo.resizable.js"></script>
        <script src="../../source/js/kendo.window.js"></script>
        <script src="../js/kendo.console.js"></script>
        <!-- script -->
    </head>
    <body>
        <!-- nav -->
        <!-- nav -->
        <!-- description -->
        <div class="description">Events</div>
        <!-- description -->
        <div id="example" class="k-content">
            <div class="configuration">
                <span class="infoHead">Information</span>
                <p>
                    This example shows how to attach events to a kendoWindow and how they are fired and triggered.
                </p>
            </div>

            <!-- Window HTML -->
            <div id="window"></div>

            <!-- open button -->
            <span id="undo" style="display:none" class="k-group">Click here to open the window.</span>

            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

                    function onOpen(e) {
                        kendoConsole.log("event :: open");
                    };

                    function onClose(e) {
                        undo.show();
                        kendoConsole.log("event :: close");
                    };

                    function onActivate(e) {
                        kendoConsole.log("event :: activate");
                    };

                    function onRefresh(e) {
                        kendoConsole.log("event :: refresh");
                    };

                    function onResize(e) {
                        kendoConsole.log("event :: resize");
                    };

                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "500px",
                            title: "Kendo Window",
                            actions: ["Refresh", "Close"],
                            contentUrl: 'ajax/ajaxContent.html',
                            activate: onActivate,
                            close: onClose,
                            open: onOpen,
                            resize: onResize,
                            refresh: onRefresh
                        });
                    }
                });
            </script>

            <style scoped="scoped">
                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    border-width: 1px;
                    border-style: solid;
                    padding: 2em;
                    cursor: pointer;
                }
            </style>
        </div>
        <br/>
        <div class="console"></div>
        <!-- tools -->
        <!-- tools -->
    </body>
</html>
